<template>
  <div>
    <template>
      <!-- 循环无限触底 -->
      <div class="infinite-list-wrapper">
        <ul
          class="list"
          v-infinite-scroll="load"
          infinite-scroll-distance="10"
          style="overflow: auto"
          v-if="data"
        >
          <li v-for="item in data" class="list-item" :key="item.mid">
            <!-- 帖子内容 -->
            <img
              src="../../public/pic/头像.jpg"
              
              style="vertical-align: bottom;width: 60px;height: 60px;border-radius: 50%;"
            >
            <span style="margin-left: 5px">{{
              item.phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
            }}</span>
            <span style="display: block; float: right; margin-top: 40px">{{
              moment.unix(item.msg_time / 1000).format("YYYY年MM月DD HH:mm:ss")
            }}</span>

            <div class="post">
              <p v-if="item.msg">
                {{ item.msg }}
              </p>
              <div class="pic">
                <div>
                  <img
                    :src="item.msg_pic1"
                    alt=""
                    v-if="item.msg_pic1 ? true : false"
                  />
                </div>
                <div>
                  <img
                    :src="item.msg_pic2"
                    alt=""
                    v-if="item.msg_pic2 ? true : false"
                  />
                </div>
                <div>
                  <img
                    :src="item.msg_pic3"
                    alt=""
                    v-if="item.msg_pic3 ? true : false"
                  />
                </div>
              </div>
            </div>
            <div class="share">
              <el-button
                @click="copyLink(`http://8.136.106.157:8080${$route.path}`)"
              >
                <i class="el-icon-share"></i>分享
              </el-button>
              <el-button
                @click="
                  comment = true;
                  number(item.mid);
                  getPageList();
                "
              >
                <i class="el-icon-chat-dot-round"></i>评论
              </el-button>
              <span
                style="line-height: 38px; border: 0;width: 100px; background-color: transparent"
                @click="
                  number(item.mid, item.scount);
                  like($event);
                "
              >
                <img
                  style="width: 14px; height: 14px;vertical-align: middle;"
                  src="../assets/an.png"
                  alt=""
                />
                <span style="font-size: 14px;"> {{ item.scount }}点赞 </span>
              </span>
            </div>
          </li>
        </ul>
        <p v-if="loading" style="text-align: center; margin: 0">加载中...</p>
        <p v-if="noMore()" style="text-align: center; margin: 0">
          人家是有底线的
        </p>
      </div>
    </template>
    <el-dialog title="大家都在评论..." :visible.sync="comment" width="40%">
      <div style="margin: 0 auto">
        <form action="">
          <el-input
            placeholder="请输入内容"
            v-model="form.remark_msg"
            clearable
          >
            <template slot="append">
              <el-button style="border: 0" @click="send()" :plain="true"
                >发送</el-button
              >
            </template>
          </el-input>
        </form>
      </div>
      <ul v-if="data2">
        <li style="background: #eee" v-for="item of data2" :key="item.pid">
          <img
              src="../../public/pic/头像.jpg"
              
              style="vertical-align: bottom;width: 50px;height: 50px;border-radius: 50%;"
            >
          <span style="margin-left: 5px">{{
            item.remark_phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
          }}</span>
          <span style="display: block; float: right; margin: 35px 10px 0 0">{{
            moment.unix(item.remark_time / 1000).format("YYYY年MM月DD HH:mm:ss")
          }}</span>
          <p style="padding: 20px 15px">{{ item.remark_msg }}</p>
        </li>
      </ul>
      <div class="block">
        <el-button-group>
          <el-button
            type="info"
            size="mini"
            plain
            @click="getPageGo(-1)"
            :disabled="isActive"
            >上一页</el-button
          >
          <el-button type="info" size="mini" plain @click="getPageGo(1)"
            :disabled="xia2">下一页</el-button
          >
        </el-button-group>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      loading: false,
      loadr: false,
      page: 1,
      data: [],
      date: 200,
      comment: false,
      form: {
        remark_msg: "",
        mid: "",
        remark_phone: "",
        remark_time: Date.now(),
      },
      form2: {
        mid: "",
        scount: "",
      },
      data2: "",
      page2: 1,
      xia2:false
    };
  },
  mounted() {
    this.save();
    // 分页查询帖子
    let url = `/clubs?page=${this.page}`;
    this.axios.get(url).then((res) => {
      this.data.push(...res.data.data);
    });
  },
  watch:{
    comment(to,from){
      this.page2=1
      this.xia2=false
      console.log(this.page2)
    }
  },
  inject: ["reload"],
  methods: {
    //点击复制链接
    copyLink(val) {
      // 复制链接
      let url = val; // 后台接口返回的链接地址
      let inputNode = document.createElement("input"); // 创建input
      inputNode.value = url; // 赋值给 input 值
      document.body.appendChild(inputNode); // 插入进去
      inputNode.select(); // 选择对象
      document.execCommand("Copy"); // 原生调用执行浏览器复制命令
      inputNode.className = "oInput";
      inputNode.style.display = "none"; // 隐藏
      this.$message({
        message: "复制成功",
        type: "success",
        duration: 2000,
        center: true,
      });
    },
    save() {
      this.form.remark_phone = sessionStorage.getItem("phone");
    },
    number(a, b) {
      this.form.mid = a;
      this.form2.mid = a;
      this.form2.scount = b;
    },
    send() {
      if (!sessionStorage.getItem("phone")) {
        this.$message({
          message: "请先登录",
          type: "warning",
          center:true,
        });
      } else {
        this.axios
          .post("/remark", qs.stringify(this.form))
          .then(async (res) => {
            await this.axios
              .get(`/getremark?mid=${this.form.mid}&page=1`)
              .then((res) => {
                this.data2 = res.data.data;
                this.form.remark_msg = "";
              });
          });
      }
    },
    load() {
      if (this.loading) {
        return;
      }
      if (this.page === 1) {
        this.page += 1;
        return;
      } else {
        this.loading = true;
        setTimeout(() => {
          let url = `/clubs?page=${this.page}`;
          this.axios.get(url).then((res) => {
            if (res.data.code == 201) {
              this.loading = false;
              this.date = res.data.code;
              return;
            }
            this.data.push(...res.data.data);
            this.page++;
            this.loading = false;
          });
        }, 1000);
      }
    },
    noMore() {
      return this.date > 200;
    },

    // 评论获取
    getPageList() {
      this.axios
        .get(`/getremark?mid=${this.form.mid}&page=${this.page2}`)
        .then((res) => {
          if (!res.data.data || res.data.data.length < 4) {
            this.xia2 = true;
          }
          this.data2 = res.data.data;
        });
    },
    //点击上一页和下一页
    getPageGo(index) {
      this.page2 = this.page2 + index;
      this.getPageList();
    },

    // 帖子点赞
    like(e) {
      this.axios
        .post("/support", qs.stringify(this.form2))
        .then(async (res) => {
          await this.axios
            .get(`/getsupport?mid=${this.form2.mid}`)
            .then((res) => {
              // e.target.innerHTML = " " + res.data.data[0].scount + "点赞";
              e.target.innerText = " " +res.data.data[0].scount+"点赞";
            });
        });
    },
  },
  computed: {
    //当页码数到第一页时，上一页按钮禁用
    isActive() {
      if (this.page2 > 1) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  text-align: left;
}
// 看帖
.infinite-list-wrapper {
  .list::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
  }
  .list::-webkit-scrollbar-track-piece {
    background-color: rgb(199, 198, 198);
    border-radius: 15px;
    -webkit-border-radius: 15px;
  }
  .list::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgb(160, 158, 158);
    border-radius: 15px;
    -webkit-border-radius: 15px;
  }
  .list::-webkit-scrollbar-thumb:horizontal {
    width: 7px;
    background-color: rgb(160, 158, 158);
    border-radius: 15px;
    -webkit-border-radius: 15px;
  }
  .list {
    list-style: none;
    height: 100vh;
    margin-top: 0;
    .list-item {
      background-color: white;
      margin-top: 10px;
      padding: 5px 15px;
      border-radius: 6px;
      text-align: left;
      .post {
        width: 100%;
        p {
          margin: 10px 70px;
          box-shadow: 0 0 3px 6px #ebe7e7;
          padding: 30px 10px;
          border-radius: 6px;
        }
        .pic {
          width: 75%;
          display: flex;
          margin: 0 auto;
          div {
            width: calc(100% / 3);
            text-align: center;
            display: flex;
            align-items: center;
            img {
              width: 70%;
              margin: 0 auto;
            }
          }
        }
      }
      .share {
        display: flex;
        justify-content: space-evenly;
        .el-button {
          border: 0;
        }
      }
    }
  }
}
</style>
